<!DOCTYPE html>
<html>
  <head>
    <title>sanjijilian.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript" src="/test/jquery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
	var provinces=[
	"福建省",
	"浙江省"];
	var citys=[
	["福州市","厦门市","泉州市","莆田市"],
	["杭州市"]
	];
	var areas=[
	[["福清","闽侯"],["海沧","思明"],["德化","永春","安溪","晋江"],["仙游"]],[["西湖"]]];
	$(function(){
				//初始化添加省份
				for( var i = 0 ; i<provinces.length; i++){
					$("#province").append("<option>" + provinces[i] + "</option>");
				}
				//选择省份时触发事件
				$("#province").change(function(){
					//清除city和area下拉框的数据
					$("#city option").not(":eq(0)").remove();//从中先筛选出第一条不删除
					//$("#city option").remove();
					$("#area option").not(":eq(0)").remove();
					//$("#area option").remove();
					//得到被选中省份的下标
					var province_index = $("#province option:selected").index();
					//获得被选中省份下的城市
					var new_city = citys[province_index-1];
					//遍历添加城市
					for(var i = 0; i < new_city.length; i++){
						$("#city").append("<option>" + new_city[i] + "</option>")
					}
				});
				$("#city").change(function(){
					//清除area下拉框的数据
					$("#area option").not(":eq(0)").remove();
					//$("#area option").remove();
					//得到被选中省份的下标
					var province_index = $("#province option:selected").index();
					//得到被选中城市的下标
					var city_index = $("#city option:selected").index();
					
					//获得被选中城市下的地区
					var new_area = areas[province_index-1][city_index-1];
					//遍历添加地区
					for(var i = 0; i < new_area.length; i++){
						$("#area").append("<option>" + new_area[i] + "</option>")
					}
					
				});
	});
            
	</script>
  </head>
  
  <body>
  	<div>
    <select id="province">
    	<option>--请选择--</option>
    </select>
    <select id="city">
   		 <option>--请选择--</option>
    </select>
    <select id="area">
    	<option>--请选择--</option>
    </select>
    </div>
  </body>
</html>
